<template>
    <div class="mains">
        <div class="login-contain">
          <div class="button-container">
            <van-button type="primary" class="main-button">真人对弈</van-button>
            <van-button type="primary" class="main-button" @click="ai_chess_setting">人机对弈</van-button>

            <van-button type="warning" class="logout-button" @click="logout()">退出登录</van-button>

          </div>

<!--          <div class="panel">-->
<!--            <el-select v-model="opponent" placeholder="请选择">-->
<!--              <el-option-->
<!--                  v-for="item in opponents_options"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--            <button @click="enter_game_district()">进入游戏区</button>-->
<!--            <button @click="load_game()">载入棋局</button>-->
<!--            <button @click="logout()">退出登录</button>-->
<!--          </div>-->


          <div class="game-district">
          </div>

<!--          <div>{{msg}}</div>-->
        </div>

    </div>
</template>

<script setup>
import { reactive, getCurrentInstance, watch, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {useStore} from 'vuex'
import { useRouter } from 'vue-router'
import cookies from 'js-cookie'
const instance = getCurrentInstance()


let sel_piece = null
let sel_row = null
let sel_col = null
let player = 'B'
let msg = ref(0)
let opponents_options = ref([
  {"label":"Human", "value":"Human"},
  {"label":"Machine", "value":"Machine"}
])
let opponent = ref("Human")

const {commit} =useStore()
const router = useRouter()


function logout() {
  instance.proxy.$http.post('/api/v2.0/user/logout ', {'test':123}).then((res) => {
    let error = res.error
    if (error == 0) {
      ElMessage.success('登出成功')
      // cookies.set('userid', val.username)
      // sessionStorage.setItem('tokenAddFun',res.token)
      // sessionStorage.setItem('userAddId',val.username)
      // commit('updateName',val.username)
      router.push({
        name: 'Login',
      })
    }else{

      ElMessage.error('error:' + error)

    }
  })
}

function enter_game_district() {
  instance.proxy.$http.post('/api/v2.0/game/enter_district ', {'test':123, 'opponent_select': opponent.value}).then((res) => {
    let error = res.error
    if (error == 0) {
      ElMessage.success('进入成功')
      // cookies.set('userid', val.username)
      // sessionStorage.setItem('tokenAddFun',res.token)
      // sessionStorage.setItem('userAddId',val.username)
      // commit('updateName',val.username)
      sessionStorage.setItem('player', res.player);
      sessionStorage.setItem('match_id', res.match_id);
      console.log("enter_district:", res)
      router.push({
        name: 'Chess',
      })
    }else{

      ElMessage.error('error:' + error)

    }
  })
}

function load_game() {
  sessionStorage.setItem('player', "0");
  sessionStorage.setItem('match_id', "1");
  router.push({
    name: 'Chess',
  })
}


function ai_chess_setting() {
  router.push({
    name: 'setting',
  })
}

</script>

<style  scoped>
  .mains {
      /*background-image: url('../assets/bac.jpg');*/
      /*background-repeat: no-repeat;*/
      /*background-size: cover;*/
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
  }
  .login-contain {
      width: 578px;
      height: 350px;
      padding: 0px;
      margin: 0 auto;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      align-self: center;
      /* background: #FFFFFF; */
      border-radius: 8px;
  }
  .button-container {
    display: flex;
    flex-direction: column;  /* 垂直排列 */
    align-items: center;     /* 水平居中 */
    justify-content: center; /* 垂直居中 */
    height: 100vh;           /* 使用视口高度或父容器高度 */
    gap: 16px;               /* 按钮间距 */
  }
  .main-button {
    height: 80px;
    width: 200px;
    font-size: 30px;
  }

  .logout-button {
    height: 60px;
    width: 200px;
    font-size: 30px;
    margin-top: 60px;
  }

  .bord-col {
    float:left;
    height:30px;
    width:40px;
    display: flex; /* 设置容器为flex布局 */
    align-items: center; /* 水平居中对齐项目 */
    justify-content: center; /* 垂直居中对齐项目 */
    cursor: default;
  }

  .active-piece {
    text-decoration-line: underline;
  }

  .red-piece {
    color: red;
  }

  .input{
      width: 350px;
      height: 40px;
      text-align: left;
      margin-top:10px;
  }
  .btn{
      margin-top: 30px;
      width: 350px;
      height: 40px;
      background-color: rgb(0, 150, 230);
      color: #fff;
      font-size: 20px;
  }
  .panel button {
    margin-left: 20px;
  }

  .chess-board {
    height:605px;
    width: 538px;
  }

  /deep/ .el-input__inner{
      background-color: rgba(255,255,255,0) !important;
  }
  /deep/ .el-input__inner:-webkit-autofill{
      transition: background-color 5000s ease-in-out 0s;
  }
  /deep/ .el-input__inner:-webkit-autofill:focus{
      -webkit-text-fill-color: #333 !important;
  }
</style>
